<%--
  Created by IntelliJ IDEA.
  User: cdyoue
  Date: 2018/11/20
  Time: 16:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

</head>
<style>
    .addWrap {
        display: none;
    }

</style>
<body class="xg">
<%@ include file="head.jsp" %>
<span class=" col-md-4" >
<button id="addBtn" class="btn btn-warning" style="text-align: center">新增</button>
<div class="addWrap" id="addWrap">
    <span></span>
    <table>
        <tr>
            <td>
               <span>宠物名称：</span>
                </td>
            <td>
            <input id="petname" type="text">
            </td>
        </tr>
        <tr>
            <td>
            <span>颜色：</span>
                </td>
            <td>
    <input id="color" type="text">
            </td>
        </tr>
        <tr>
             <td>
    <span>价格：</span>
                 </td>
            <td>
    <input id="price" type="text">
            </td>
        </tr>
        <tr>
            <td>
              <span>体重：</span>
                </td>
            <td>
    <input id="weight" type="text">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="align-content: center">
                 <button id="submitAdd" class="btn btn-default">提交</button>
            </td>
        </tr>
    </table>
</div>
</span>

<span class="col-md-8">

    <div class="btnWrap">
    <span>宠物id：</span>
    <input type="text" id="search_id"></input>
    <span>宠物名称：</span>
    <input type="text" id="search_name"></input>
    <button id="search" class="btn btn-success">搜索</button>
</div>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>序号</th>
        <th>宠物名称</th>
        <th>颜色</th>
        <th>价格</th>
        <th>体重</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="context">
    <td>
        <button>编辑</button>
        <button>删除</button>
    </td>
    </tbody>


</table>
    </span>
</body>
<script>

    var basePath = $("#basePath").attr("path");

    var id = "";
    function init() {
        var str = "";
        var url = basePath + "pets";
        var seachId = $("#search_id").val();
        var searchName = $("#search_name").val();
        if (seachId) {
            url += "?id=" + seachId;
            if (searchName) {
                url += "&petname" + searchName;
            }
        } else if (searchName) {
            url += "?petname=" + searchName;

        }


        $.get(url, function (rep) {
            var data = rep.data;
            for (var i = 0; i < data.length; i++) {
                str += "<tr> <td>" + data[i].id + "</td>" +
                    " <td>" + data[i].petname + "</td> " +
                    "<td>" + data[i].color + "</td> " +
                    "<td>" + data[i].price + "</td>" +
                    " <td>" + data[i].weight + "</td>" +
                    "<td> " +
                    "<button class='btn btn-info'  onclick='edit(" + data[i].id + ",this)'>编辑</button>" +
                    " <button class='btn btn-danger'  onclick='del(" + data[i].id + ")'>删除</button> " +
                    "</td>" +
                    "</tr>"
            }
            $("#context").html(str)
        });
    }
    init();

    $("#search").click(function () {
        init();
    })

    $("#addBtn").click(function () {
        id = "";
        $("#addWrap").show();
    })
    $("#submitAdd").click(function () {
        save(id);
    })
    function save(id) {
        if (id) {
            $.ajax({
                url: basePath + 'pets',
                type: 'post',
                data: {
                    id: id,
                    petname: $('#petname').val(),
                    color: $('#color').val(),
                    price: $('#price').val(),
                    weight: $('#weight').val(),
                },
                success: function (res) {
                    if (res.data.code === 200) {
                        $("#addWrap").hide();
                        window.reload();
                    }
                }
            })
        } else {
            $.ajax({
                url: basePath + 'pets',
                type: 'post',
                data: {
                    petname: $('#petname').val(),
                    color: $('#color').val(),
                    price: $('#price').val(),
                    weight: $('#weight').val(),
                },
                success: function (res) {
                    if (res.data.code === 200) {
                        $("#addWrap").hide();
                        window.location.reload();
                    }
                }
            })
        }

    }

    function del(id) {
        $.ajax({
            url: basePath + 'pets/' + id,
            type: 'DELETE',
            success: function (rep) {
                // Do something with the result
                alert(rep.message);
                window.location.reload();
            }
        });

    }

    function edit(id, _this) {
        $("#addWrap").show();
        $('#petname').val($(_this).parents("tr").find("td").eq(1).text());
        $('#color').val($(_this).parents("tr").find("td").eq(2).text());
        $('#price').val($(_this).parents("tr").find("td").eq(3).text());
        $('#weight').val($(_this).parents("tr").find("td").eq(4).text());
        id = id;
    }
</script>
</html>
